Simplify stats images styles
This way we don't need to manually define the width we think the image we insert in the `::before` pseudoclass is going to take.
This commit is contained in:
BIN
app/assets/images/stats_users.png
Normal file
BIN
app/assets/images/stats_users.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
@@ -22,20 +22,14 @@
|
||||
|
||||
.number-with-info {
|
||||
display: inline-block;
|
||||
margin-right: $line-height * 2;
|
||||
|
||||
&.participants {
|
||||
padding-left: $line-height * 2.5;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
&::before {
|
||||
display: inline-block;
|
||||
margin-right: $line-height / 2;
|
||||
}
|
||||
|
||||
&.total-participants::before {
|
||||
content: image-url('stats_man.png');
|
||||
content: image-url('stats_users.png');
|
||||
}
|
||||
|
||||
&.male::before {
|
||||
@@ -46,6 +40,11 @@
|
||||
content: image-url('stats_woman.png');
|
||||
}
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
margin-right: $line-height * 2;
|
||||
}
|
||||
|
||||
.number {
|
||||
display: block;
|
||||
font-size: rem-calc(60);
|
||||
|
||||
@@ -37,7 +37,9 @@ module StatsHelper
|
||||
|
||||
def number_with_info_tags(number, text, html_class: "")
|
||||
content_tag :p, class: "number-with-info #{html_class}".strip do
|
||||
content_tag(:span, number, class: "number") + content_tag(:span, text, class: "info")
|
||||
content_tag :span, class: "content" do
|
||||
content_tag(:span, number, class: "number") + content_tag(:span, text, class: "info")
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
Reference in New Issue
Block a user