Skip to content

Instantly share code, notes, and snippets.

@gonghao

gonghao/dabblet.css

Forked from kejun/dabblet.css
Created December 28, 2012 03:52
Show Gist options
  • Save gonghao/4394288 to your computer and use it in GitHub Desktop.
Save gonghao/4394288 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. gonghao revised this gist Dec 28, 2012. No changes.
  2. gonghao revised this gist Dec 28, 2012. No changes.
  3. gonghao revised this gist Dec 28, 2012. No changes.
  4. gonghao revised this gist Dec 28, 2012. No changes.
  5. @kejun kejun revised this gist Dec 24, 2012. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <div class="rating">
    <input type="radio" name="any_name" value="1" id="sel-rating-1"><label for="sel-rating-1">1</label>
    <input type="radio" name="any_name" value="2" id="sel-rating-2"><label for="sel-rating-2">2</label>
    <input type="radio" name="any_name" value="3" id="sel-rating-3" checked><label for="sel-rating-3">3</label>
    <input type="radio" name="any_name" value="4" id="sel-rating-4"><label for="sel-rating-4">4</label>
    <input type="radio" name="any_name" value="5" id="sel-rating-5"><label for="sel-rating-5">5</label>
    <input type="radio" name="any_name" value="4" id="sel-rating-4" checked><label for="sel-rating-4">4</label>
    <input type="radio" name="any_name" value="3" id="sel-rating-3"><label for="sel-rating-3">3</label>
    <input type="radio" name="any_name" value="2" id="sel-rating-2"><label for="sel-rating-2">2</label>
    <input type="radio" name="any_name" value="1" id="sel-rating-1"><label for="sel-rating-1">1</label>
    </div>
  6. @kejun kejun revised this gist Dec 24, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <div class="rating">
    <input type="radio" name="any_name" value="1" id="sel-rating-1"><label for="sel-rating-1">1</label>
    <input type="radio" name="any_name" value="2" id="sel-rating-2"><label for="sel-rating-2">2</label>
    <input type="radio" name="any_name" value="3" id="sel-rating-3"><label for="sel-rating-3">3</label>
    <input type="radio" name="any_name" value="3" id="sel-rating-3" checked><label for="sel-rating-3">3</label>
    <input type="radio" name="any_name" value="4" id="sel-rating-4"><label for="sel-rating-4">4</label>
    <input type="radio" name="any_name" value="5" id="sel-rating-5"><label for="sel-rating-5">5</label>
    </div>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
  7. @kejun kejun revised this gist Dec 21, 2012. 1 changed file with 0 additions and 4 deletions.
    4 changes: 0 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,3 @@
    .rating input:checked ~ input + label {
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABgFBMVEXRXzXs0sT//v779fLu2MzSYTT0akL58e326ePqYkLy4tnmxbPqzb3dYTq6XizYpIntZELhYj37bkPcrpW6XCvCXS3esZrNYTHbZjf1bUDoybjJgVvLhmHZYDnKXjLmaDvNXjPGXi/GeVD9+vjBbUHlwa7Pjmv37Ofw3dPqZUDhZTvaqY7MiWXlZT7CcUb+/v3VnX+8YzPeZDnYYza9ZTbftJ7OXjTQkG/XYTfhuqTsaj7UYjTXoYS/aTvUYDe7YTHwaz/kYz7XYjfXYzXWXzj2a0P0aUP8+Pb2akPxZ0O9XCvzaEPyaEPvZUPyZ0PvZkPuZULsY0LwZkPwZ0P4bEP3a0P5bUP6bUP5bEP8b0Pjvan05d2+ZznAaj39cEPIfVXHfFTRlHTt1cjbq5LEdErFd079+/r15+Drz8HgtqDvaUDy39bqZj/lZzzwaUDHXTDYZDXtZ0DfZzj47+nIf1jJYC/yaULuZ0HTmHnUmXrw28+7Xy7VYTb4bkH5bkP///8s9V56AAAAgHRSTlP/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ADgFS2cAAAIJSURBVHjaldX5V9owAMDxGmBQrtoRUDkqyI2MgUKZ4jyQ6e6NjW2WS0R0p5vTuUPY8q+7duWN1ya1/f7UNPn8kCbvlUL4on2EjwQceYOg3DEGQOHi0hBwzpwxhsCv+bmcEQDav7sRuwHQv+h2Zz0GwNqZIGwuGACxOUEQvDbdIBW5+bfTkm6wOCuC1YBuMNgUwR9o1Qla3jdSlaZO4Dt9LTWf1Ql6q3tSjWFUF0jCxr/2ZhwYsKuqtN2QO0moZyl/8aGiyodX47aVc/CQQrZe5cY9fS13+uIeAANP9Cz/XAla5U0728v3ry3j9vz/Sslvlu/XrK/GzJOfFSzCzI5GXy1Zk+Ic3t2tktcvuX3qgzsPWH48wjeKXeJOGhzCzGNMn6iEiXA1pjqjp6pcw/fku2QNLj1QlM6ltC6fOaIEIx/SAkz1paJb+5ogl36hDCY1gN37TBW1ogE8609UsUENsLD1XJ3bRAQ277QcG4ah8XM4TgQlSl5zpxBP5cYDV4IIAuy0FHXUQiha5rekUXrjmADOYV2M5fJAGq8MQ9ILzk8ATV6crhUdSO7jgBLfhA4IIOuq12m+93bib30QZus0XQRYEHXTtItbA2iy5kaNpr9MYYGDo9eLfqTIPuDpWh4LyiF+34ZUHf/k2A4OgAJkAMIVL0TMGOBsOxGh1hGDAc0kInbbpwAGugICsJ4iKYYBmgAAAABJRU5ErkJggg==);
    }



    body { padding: 100px; }
  8. @kejun kejun revised this gist Dec 21, 2012. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,6 @@
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: center;
    display: table-cell;
    }

    .rating label {
  9. @kejun kejun revised this gist Dec 21, 2012. 1 changed file with 6 additions and 3 deletions.
    9 changes: 6 additions & 3 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,8 +8,11 @@

    .rating label {
    display: inline-block;
    width: 30px;
    height: 30px;
    width: 24px;
    height: 24px;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAyVBMVEXGxsb+/v6zs7O8vLy7u7u6urrCwsL////AwMC5ubm/v7+9vb3Dw8O+vr7ExMS3t7fBwcG4uLi1tbW0tLTFxcW2traysrLg4ODt7e37+/vY2Njn5+fU1NT9/f35+fnr6+v19fXk5OTKysrHx8fi4uLa2trc3Nz39/fv7+/R0dHu7u7Ly8ve3t7Pz8/p6enl5eXT09PNzc38/Pzy8vLJycnZ2dnV1dXj4+Pq6urd3d3b29v09PTm5ubQ0NDIyMjX19fW1tbx8fH///9F+zTWAAAAQ3RSTlP///////////////////////////////////////////////////////////////////////////////////////8AQWIE7wAAAa5JREFUeNqV09dygzAQQNEVanQMGNy7nd57L/r/j0owtpMgiYj7xgyHWRVAqEMToU4HZocNwbHTDPAs6jYCg9i7awROAx83AnEbsusGYBIB4H4DcOEBMLsBICEAJGNjcJDBd2TPGLzjArRCYxD4UGSNDME0gXW0YwhWuAT2whAwBmUpMgK9HDY5MwVAUntkC+w5koLzyKpEfNiGrWp9EGNG2mAWdibFGvgwb4FBIV2MhIDN7wL/5lq3P7vU8/8dC9Pun239yO36cd5Q5RzOYlw3zpN8cFchDXXjkCPlSfct5Vg+nSPN1XhwFGMF6aP+Lo3Alb6PD+ouXzeS5l+JOjCUTpCxWoB9qJb3asB1BlLkpAb0sQxaUANsBnIW0oL9ZLdUau02mC61YPdzesnyCG8f7BstCFubdbpTIdCcllvWTrkGXFnlKp3D8o2TNIAi51wDOnQ9TjYTmz699VjupQYs7GIce1/s4peUAbQjrgQoLca54OJ3nWKs+EwJ7h3wohdR6TkgELwqwbFL2FhI8VPKHBXgST7kQtUyiboKMIgHQtPUHSpApye08ZUEjPsCKj+LDQz5xjYAAAAASUVORK5CYII=) no-repeat 0 0;
    background-size:24px 24px;
    font-size:0;
    cursor: pointer;
    }
    .rating input {
    @@ -18,7 +21,7 @@

    .rating input:checked + label,
    .rating input:checked ~ input + label {
    color: red;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABgFBMVEXRXzXs0sT//v779fLu2MzSYTT0akL58e326ePqYkLy4tnmxbPqzb3dYTq6XizYpIntZELhYj37bkPcrpW6XCvCXS3esZrNYTHbZjf1bUDoybjJgVvLhmHZYDnKXjLmaDvNXjPGXi/GeVD9+vjBbUHlwa7Pjmv37Ofw3dPqZUDhZTvaqY7MiWXlZT7CcUb+/v3VnX+8YzPeZDnYYza9ZTbftJ7OXjTQkG/XYTfhuqTsaj7UYjTXoYS/aTvUYDe7YTHwaz/kYz7XYjfXYzXWXzj2a0P0aUP8+Pb2akPxZ0O9XCvzaEPyaEPvZUPyZ0PvZkPuZULsY0LwZkPwZ0P4bEP3a0P5bUP6bUP5bEP8b0Pjvan05d2+ZznAaj39cEPIfVXHfFTRlHTt1cjbq5LEdErFd079+/r15+Drz8HgtqDvaUDy39bqZj/lZzzwaUDHXTDYZDXtZ0DfZzj47+nIf1jJYC/yaULuZ0HTmHnUmXrw28+7Xy7VYTb4bkH5bkP///8s9V56AAAAgHRSTlP/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ADgFS2cAAAIJSURBVHjaldX5V9owAMDxGmBQrtoRUDkqyI2MgUKZ4jyQ6e6NjW2WS0R0p5vTuUPY8q+7duWN1ya1/f7UNPn8kCbvlUL4on2EjwQceYOg3DEGQOHi0hBwzpwxhsCv+bmcEQDav7sRuwHQv+h2Zz0GwNqZIGwuGACxOUEQvDbdIBW5+bfTkm6wOCuC1YBuMNgUwR9o1Qla3jdSlaZO4Dt9LTWf1Ql6q3tSjWFUF0jCxr/2ZhwYsKuqtN2QO0moZyl/8aGiyodX47aVc/CQQrZe5cY9fS13+uIeAANP9Cz/XAla5U0728v3ry3j9vz/Sslvlu/XrK/GzJOfFSzCzI5GXy1Zk+Ic3t2tktcvuX3qgzsPWH48wjeKXeJOGhzCzGNMn6iEiXA1pjqjp6pcw/fku2QNLj1QlM6ltC6fOaIEIx/SAkz1paJb+5ogl36hDCY1gN37TBW1ogE8609UsUENsLD1XJ3bRAQ277QcG4ah8XM4TgQlSl5zpxBP5cYDV4IIAuy0FHXUQiha5rekUXrjmADOYV2M5fJAGq8MQ9ILzk8ATV6crhUdSO7jgBLfhA4IIOuq12m+93bib30QZus0XQRYEHXTtItbA2iy5kaNpr9MYYGDo9eLfqTIPuDpWh4LyiF+34ZUHf/k2A4OgAJkAMIVL0TMGOBsOxGh1hGDAc0kInbbpwAGugICsJ4iKYYBmgAAAABJRU5ErkJggg==);
    }


  10. @kejun kejun created this gist Dec 21, 2012.
    26 changes: 26 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@

    .rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: center;
    display: table-cell;
    }

    .rating label {
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    }
    .rating input {
    display:none;
    }

    .rating input:checked + label,
    .rating input:checked ~ input + label {
    color: red;
    }



    body { padding: 100px; }
    7 changes: 7 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <div class="rating">
    <input type="radio" name="any_name" value="1" id="sel-rating-1"><label for="sel-rating-1">1</label>
    <input type="radio" name="any_name" value="2" id="sel-rating-2"><label for="sel-rating-2">2</label>
    <input type="radio" name="any_name" value="3" id="sel-rating-3"><label for="sel-rating-3">3</label>
    <input type="radio" name="any_name" value="4" id="sel-rating-4"><label for="sel-rating-4">4</label>
    <input type="radio" name="any_name" value="5" id="sel-rating-5"><label for="sel-rating-5">5</label>
    </div>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}