Chevron up before & after

[phenomlab]

@cagatay this will be a simple state change based on CSS. Do you want a different colour for downvote and upvote ?

[cagatay]

@phenomlab i want that for example the heart will red color mean all inside when uptoved.

[phenomlab]

@cagatay you want the heart to become red filled when someone upvotes ? CSS on its own won’t be enough for this. It’ll require a js based trigger to accomplish this.

[crazycells]

@phenomlab said in Chevron up before & after:

@cagatay you want the heart to become red filled when someone upvotes ? CSS on its own won’t be enough for this. It’ll require a js based trigger to accomplish this.

maybe something like this might work?

This is what we use for “thumbs up” and “thumbs down” icons…

span.votes {
    .fa-chevron-up:before {
        content: "\f164";
        font-weight: 400;
        padding-right: 5px;
        margin-left: 20px;

    }
    .upvoted .fa-chevron-up:before {
        content: "\f164";
        font-weight: 900;
        padding-right: 5px;
        margin-left: 20px;
    }
    
    .fa-chevron-down:before {
        content: "\f165";
        font-weight: 400;
        padding-left: 5px;
    }
    .downvoted .fa-chevron-down:before {
        content: "\f165";
        font-weight: 900;
        padding-left: 5px;
    }
}

[phenomlab]

@cagatay actually, I just realised you’re using the heart icon for upvote - apologies - I thought that this was the reactions plugin.

In this case, CSS would in fact work.

[cagatay]

@crazycells i use them (I want the heart and hand sign to have a red color inside after they are empty, with a hollow red edge before being pressed, and a full red when pressed)

[Mod change - please post in English - translated]

span.tag:before {
    content: "\f02c";
    font-family: "Font Awesome 5 Free";
    margin-right: 3px;
    margin-left: 2px;
    font-weight: 600;
	font-size: 9px;
	vertical-align: 0;
}
.fa-chevron-up:before {
    font-family: 'Font Awesome 5 Free';
	font-weight: 300;
	font-size: 16px;
	content: '\f004';
	margin-right: 4px;
	vertical-align: -1px;
	color: red;
}

.topic [component="post/upvote"].upvoted i::before {
    content: "\f004";
    color: red;
}

.fa-chevron-down:before  {
    font-family: 'Font Awesome 5 Free';
	font-weight: 300;
	font-size: 16px;
	content: '\f165';
	margin-right: 4px;
	vertical-align: -1px;
	color: red;
}

[crazycells]

@cagatay please try this:

span.votes {
    .fa-chevron-up:before {
        content: "\f004";
        font-weight: 400;
    }
    .upvoted .fa-chevron-up:before {
        content: "\f004";
        font-weight: 900;
        color: red; 
    }
 }

[cagatay]

@crazycells up is working but i used same code changed as down type but the image is hidden while voted.

span.votes {
    .fa-chevron-down:before {
        content: "\f165";
        font-weight: 400;
    }
    .upvoted .fa-chevron-down:before {
        content: "\f165";
        font-weight: 900;
        color: red; 
    }
 }

[crazycells]

@cagatay I believe the bottom .upvoted should be .downvoted

[cagatay]

@crazycells you are right thank you.