Files
astuto/app/javascript/stylesheets/components/LikeButton.scss
Ruben Waterman 08de979b45 Add dark-mode support (#24)
* add dark-mode support

* make improvements as suggested by riggraz

* fix some dark theme styles

Co-authored-by: Riccardo Graziosi <riccardo.graziosi97@gmail.com>
2020-07-17 18:51:34 +02:00

51 lines
855 B
SCSS

.likeButtonContainer {
@extend
.d-flex,
.flex-column,
.mr-3,
.mt-2;
$like_button_size: 11px;
.likeButton {
@extend .mb-2;
border-left: $like_button_size solid transparent;
border-right: $like_button_size solid transparent;
border-bottom: $like_button_size solid rgba(35,35,35,.2);
&:hover {
border-bottom-color: $astuto-black;
cursor: pointer;
}
}
.likeButton.liked {
border-bottom-color: $astuto-black;
}
.likesCountLabel {
text-align: center;
font-size: 17px;
}
}
@media (prefers-color-scheme: dark) {
.likeButtonContainer {
.likeButton {
border-bottom-color: white;
&:hover {
border-bottom-color: black;
}
}
.likeButton.liked {
border-bottom-color: black;
}
.likesCountLabel {
color: white;
}
}
}