blob: 968ee7d3f1591e1912761ff3cdf2cf7ccbe4307b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
.s_rating:not([data-vcss]) {
$star: "\f005";
$star-o: "\f006";
$circle: "\f111";
$circle-o: "\f10c";
$heart: "\f004";
$heart-o: "\f08a";
@mixin s_rating_generate_icons($off, $on) {
.fa:before {
content: $off;
}
@for $counter from 5 to 0 {
&.s_rating_#{$counter} {
.fa:nth-of-type(-n+#{$counter}):before {
content: $on;
}
}
}
}
> .s_rating_stars { @include s_rating_generate_icons($star-o, $star); }
> .s_rating_squares { @include s_rating_generate_icons($circle-o, $circle); }
> .s_rating_hearts { @include s_rating_generate_icons($heart-o, $heart); }
> .s_rating_bar {
.fa {
display: none;
}
.s_rating_bar {
display: flex;
height: $progress-height;
background-color: $gray-300;
&:before {
content: "";
display: flex;
flex-direction: column;
justify-content: center;
@include transition($progress-bar-transition);
@include gradient-striped();
background-size: $progress-height $progress-height;
background-color: theme-color('primary');
animation: progress-bar-stripes $progress-bar-animation-timing;
}
}
@for $counter from 5 to 0 {
&.s_rating_#{$counter} {
.s_rating_bar:before {
width: percentage($counter/5);
}
}
}
}
> .s_rating_1x { .fa { font-size: 1em; }; }
> .s_rating_2x { .fa { font-size: 2em; }; }
> .s_rating_3x { .fa { font-size: 3em; }; }
}
|
