.main
- (1..3).each do |i|
.items-wrap
.item-star
- (1..10).each do |x|
%input{:type => "radio", :value=> "#{6 - x}", :id=>"star-row#{i}-col-#{x}", :name=>"star-row#{i}"}/
%label{:for => "star-row#{i}-col-#{x}"}
%i.ion-beer
.credits
%a{:href => "https://codepen.io/marko-zub/", :target=>'_blank'}
My other codepens
View Compiled
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
html,
body{
height: 100%;
overflow: hidden;
}
body {
position: relative;
margin: 0;
font-family: 'Roboto', sans-serif;
}
$star_bg: #ccc;
$star_bg_active: #f39c12;
$star_bg_hover: red;
.main {
text-align: center;
margin: 100px auto;
}
.item-star {
overflow: hidden;
display: inline-block;
margin: 10px 0 10px;
text-align: center;
input {
&:checked {
& ~ label {
color: $star_bg_active;
}
}
}
&:hover {
label {
&:hover {
color: $star_bg_hover;
& ~ label {
color: $star_bg_hover;
}
}
}
}
.star-rating {
float: right;
margin-right: 5px;
}
input {
display: none;
}
label {
float: right;
font-size: 35px;
margin: 0 15px;
color: $star_bg;
display: block;
@include transition(all 0.2s ease-in-out);
}
}
.credits {
position: fixed;
left: 0;
bottom: 0;
padding: 6px 15px;
width: 100%;
font-size: 14px;
letter-spacing: 0.02em;
font-family: "Roboto";
a {
color: #333;
font-size: 13x;
text-decoration: none;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.